●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## What's implemented
- Order header and order lines table showing Código, Descripción, Pedido and Recibido.
- Operator entry form for scanned items using EditForm with DataAnnotationsValidator and ValidationMessage.
- Scanned entries list with per-line delete, undo last, totals and finalize actions.
- Sample data loader and client-side update logic that adjusts ReceivedQty per entry.
## Key components
- EditForm, DataAnnotationsValidator, ValidationMessage
- InputText, InputNumber with @bind-Value
- Standard HTML table for order lines and a scrollable list for scanned entries
- Button elements wired to event handlers (OnValidSubmit, @onclick)
- Models using DataAnnotations: ReceiptEntryModel, OrderModel, OrderLineModel
## How it works
- The form binds to entryModel via @bind-Value on InputText/InputNumber and uses DataAnnotationsValidator for validation (Required, Range).
- On valid submit OnAddEntry updates the in-memory OrderModel (adds or updates OrderLineModel.ReceivedQty) and inserts a ReceiptEntryModel into scanned at index 0.
- DeleteEntry and UndoLast reverse changes against the order lines list; FinalizeReceipt clears the scanned list (placeholder for server commit).
- State is purely client-side in the component; persistence, concurrency and server API calls are not implemented.
## Styling
- Tailwind CSS utility classes provide layout and spacing (p-4, grid, md:grid-cols-2, max-w-4xl, bg-gray-50, rounded-lg, shadow).
- Typography and spacing rely on Tailwind; icon usage assumes a separate icon set (e.g., Font Awesome) loaded globally.
- Tables use simple responsive wrapper (overflow-x-auto) and the scanned list uses max-h-64 overflow-auto for scrollable history.
## Reuse steps
1. Add a Blazor component file and paste the Razor markup and models or move models to a shared project.
2. Ensure Tailwind CSS is available in the app or replace classes with project CSS/Bootstrap utilities.
3. No extra NuGet packages are required for basic behavior; keep Microsoft.AspNetCore.Components.Forms for EditForm.
4. Register/ensure icon fonts (Font Awesome) or replace <i> tags with SVG icons.
5. Replace in-memory actions (FinalizeReceipt, LoadSampleOrder) with HTTP calls to server endpoints and inject an HttpClient or a service.
6. Secure endpoints and add authentication/authorization as needed when committing received quantities.
## Limitations & next steps
- Persistence: FinalizeReceipt is a stub; implement server-side API to persist receipts and validate against inventory.
- Concurrency: No optimistic checks; multiple users modifying the same order may produce inconsistent ReceivedQty values.
- Accessibility: Add ARIA attributes, focus management after add, and keyboard-friendly controls for scanner workflows.
- Error handling: Add user feedback for server errors, duplicate scans, or invalid codes not found on the server.
- Testing: Add unit tests for the entry logic and integration tests for API commits.
This component is a single-page example generated by Instruct UI and is editable; integration with services, authentication, and server APIs is required for production use.